<template>
  <div>
    <NuxtLayout name="home-page" :title="title">
      <div class="talk flex flex-wrap justify-center ">
        <AnnLoading :loading="loading">
          <div class="flex flex-col items-center" v-if="totalNum>0">
            <div v-for="(talk, index) in talks" :key="talk.talkId">
              <section class="flex flex-col">
                <AnnCard
                    class="w-96"
                    title="说说"
                    iconName="file-icons:moment-timezone">
                  <!-- 头像+名字部分 -->
                  <div class="top flex items-start">
                    <div class="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                      <img :src="talk.avatar" alt="avatar"/>
                    </div>
                    <div class="ml-3 flex flex-col items-start">
                      <div class="font-bold">{{ talk.createBy }}</div>
                      <div class="text-gray-500 text-sm">
                        {{ getLastTimeStr(talk.updateTime, true) }}
                      </div>
                    </div>
                    <div class="badge badge-secondary ml-auto" v-show="talk.isTop == 1">
                      Top
                    </div>
                  </div>
                  <!-- 内容图片部分 -->
                  <div class="main">
                    <div class="flex flex-col items-start">
                      <div class="mt-2">
                        {{ talk.talkContent }}
                      </div>
                      <div class="stack cursor-pointer" ref="allImagesElement" @click="showImg(index)">
                        <img class="object-cover w-36 h-24" v-for="(image,index) in talk.talkImage" alt="talkImage"
                             :src="image" :key="index">
                      </div>
                    </div>
                  </div>
                  <!-- 点赞评论部分-->
                  <!--                <div class="bottom">
                                    <div class="flex flex-col w-full">
                                      <div class="divider"></div>
                                      <div class="grid card p-2 justify-start h-10 rounded-box">
                                        <div class="text-blue-400 text-sm">
                                          <Icon name="ph:heart" size="20" class="mr-1"/>不寻俗,
                                          <Icon name="ph:heart" size="20" class="mr-1"/>不寻俗
                                        </div>
                                      </div>
                                      <div class="divider"></div>
                                      <div class="grid card justify-start rounded-box">啊实打实大大</div>
                                    </div>
                                  </div>-->
                </AnnCard>
              </section>
            </div>
            <AnnPagination
                :totalNum="totalNum"
                :totalPages="totalPages"
                :pageSize="queryParams.pageSize"
                :pageNum="queryParams.pageNum"
                @changePage="changePage"
            />
          </div>
          <AnnEmptyPage v-else/>
        </AnnLoading>

      </div>
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import type {BlogTalkWebVO} from "~/api/talk/types";
import {queryTalkList} from "~/api/talk";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import {getLastTimeStr} from "~/utils/timeUtils";

const title = ref<string>("说说")
useHead({
  title: title.value,
  titleTemplate: title => `${title} - Annlcc's Blog`,
})
const loading = ref(true)
const allImagesElement = ref();
const talks = ref<BlogTalkWebVO[]>();
const queryParams: PageQuery = reactive({
  pageNum: 1,
  pageSize: 10,
});
const totalNum = ref();
const totalPages = ref(1);
// 查询说说方法
const handleTalkList = async (queryParams: PageQuery) => {
  loading.value = true
  // 获取文章列表
  const {data: res} = await useAsyncData("queryTalkList", () =>
      queryTalkList(queryParams)
  );
  talks.value = res.value?.rows;
  totalNum.value = res.value?.total;
  totalPages.value = Math.ceil(totalNum.value / queryParams.pageSize);
  loading.value = false;
};
const changePage = async (pageNum: number) => {
  queryParams.pageNum = pageNum
  await handleTalkList(queryParams)
}

handleTalkList(queryParams);
// 点击预览图片
const showImg = (index: number) => {
  const viewer = new Viewer(allImagesElement.value[index] as HTMLElement, {
    hide: () => {
      viewer.destroy();
    },
  });
  viewer.show();
};

</script>
<style scoped>
.divider {
  margin-top: 0;
  margin-bottom: 0;
}
</style>
